<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2>我的记事本</h2>
				<message @send="InputMsg"></message>
				<div class="list" style="margin-top: 50px;">
					<h4>列表</h4>
					<ul>
						<li v-for="(item,index) in list" :style="{textDecoration:item.status?'line-through':'none'}">
							<input type="checkbox" @click="item.status = !item.status"/>
							{{item.msg}}
							<button style="margin-left: 60px;float: right;" @click="list.splice(index,1)">删除</button>
						</li>
					</ul>
				</div>
		</div>
		
			
		<template id="message">
			<div>
				<input type="text" v-model="msg" placeholder="输入信息"/>
				<button @click="sum">增加</button>
			</div>
		</template>
		
		<script type="text/javascript">
			const message = {
				template:"#message",
				data(){
					return {
						msg:''
					}
				},
				methods:{
					sum(){
						this.$emit('send',{msg:this.msg,status:false})
						this.msg = ''
					}
				}
			}
			new Vue({
				el:'#app',
				data:{
					list:[{msg:'你好',status:false}]
				},
				methods:{
					InputMsg(val){
						this.list.push(val)
					}
				},
				components: {
					message
				},
			})
		</script>
		<style type="text/css">
			body{
				background-color: #fafafa;
			}
			ul{
				padding: 0;
				margin: 0;
			}
			ul li{
				list-style: none;
				margin: 5px 0;
				width: 370px;
			}
		</style>
	</body>
</html>
